<template>
  <div id="option-box">
    <ul>
      <li>
        <div v-bind:style="{'border-bottom':!selectMsg.Learn?'4px solid #fff':'4px solid #2D2D2D',
        'width':selectMsg.Learn?'7em':'5em'}">
          <learning-roadmap @getLearn="getLearn" v-bind:class="{isChecked:selectMsg.Learn}"></learning-roadmap>
        </div>
      </li>
      <li>
        <div v-bind:style="{'border-bottom':!selectMsg.ForumData?'4px solid #fff':'4px solid #2D2D2D',
        'width':selectMsg.ForumData?'7em':'5em'}">
          <forum v-on:getForum="getForum" v-bind:class="{isChecked:selectMsg.ForumData}"></forum>
        </div>
      </li>
      <li>
        <div v-bind:style="{'border-bottom':!selectMsg.Dev?'4px solid #fff':'4px solid #2D2D2D',
        'width':selectMsg.Dev?'7em':'5em'}">
          <dev-tool v-on:getDev="getDevTool" v-bind:class="{isChecked:selectMsg.Dev}"></dev-tool>
        </div>
      </li>
      <li>
        <div v-bind:style="{'border-bottom':!selectMsg.PrivateJData?'4px solid #fff':'4px solid #2D2D2D',
        'width':selectMsg.PrivateJData?'7em':'5em'}">
          <private-job @getPriJ="getPriJ" v-bind:class="{isChecked:selectMsg.PrivateJData}"></private-job>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import LearningRoadmap from '@/components/side-bar/option-box/Learning-roadmap.vue'
import Forum from '@/components/side-bar/option-box/Forum.vue'
import DevTool from '@/components/side-bar/option-box/Dev-tool'
import PrivateJob from '@/components/side-bar/option-box/Private-job'

export default {
  name: 'Option-box',
  components: {
    PrivateJob,
    DevTool,
    Forum,
    LearningRoadmap
  },
  data () {
    return {
      selectMsg: {
        Dev: false,
        Learn: true,
        ForumData: false,
        PrivateJData: false
      }
    }
  },
  methods: {
    getLearn () {
      this.selectMsg = Object.assign(this.selectMsg, {
        Dev: false,
        Learn: true,
        ForumData: false,
        PrivateJData: false
      })
    },
    getDevTool () {
      this.selectMsg = Object.assign(this.selectMsg, {
        Dev: true,
        Learn: false,
        ForumData: false,
        PrivateJData: false
      })
    },
    getForum () {
      this.selectMsg = Object.assign(this.selectMsg, {
        Dev: false,
        Learn: false,
        ForumData: true,
        PrivateJData: false
      })
    },
    getPriJ () {
      this.selectMsg = Object.assign(this.selectMsg, {
        Dev: false,
        Learn: false,
        ForumData: false,
        PrivateJData: true
      })
    }
  },
  watch: {
    selectMsg: {
      handler (newMsg) {
        this.$emit('getSelectMsg', this.selectMsg)
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="scss">
ul{
  list-style: none;
  margin: 0;
  padding: 0;
  li{
    margin: 2em 0;
    font-size: 30px;
    font-weight: 600;
  }
  li > div{
    display: inline-block;
    transition: .4s;
  }
}
@media screen and (max-width: 900px)and (max-height: 800px) {
  ul{
    list-style: none;
    margin: 0;
    padding: 0;
    li{
      margin: 1em 0;
      font-size: 15px;
      font-weight: 600;
    }
    li > div{
      display: inline-block;
      transition: .4s;
    }
  }
}
@media screen and (max-width: 1100px)and (max-height: 800px) {
  ul{
    list-style: none;
    margin: 0;
    padding: 0;
    li{
      margin: 1em 0;
      font-size: 15px;
      font-weight: 600;
    }
    li > div{
      display: inline-block;
      transition: .4s;
    }
  }
}
@media screen and (max-height: 800px) {
  ul{
    list-style: none;
    margin: 0;
    padding: 0;
    li{
      margin: 1.5em 0;
      font-size: 25px;
      font-weight: 600;
    }
    li > div{
      display: inline-block;
      transition: .4s;
    }
  }
}
@media screen and (max-width: 600px) and (min-width: 551px){
  ul{
    list-style: none;
    margin: 0;
    padding: 0;
    li{
      margin: 0 0.2em;
      font-size: 18px;
      font-weight: 600;
      display: inline-block;
    }
    li > div{
      display: inline-block;
      transition: .4s;
    }
  }
}
@media screen and (max-width: 550px){
  ul{
    list-style: none;
    margin: 0;
    padding: 0;
    li{
      margin: 0 0.2em;
      font-size: 18px;
      font-weight: 600;
      display: inline-block;
    }
    li > div{
      display: inline-block;
      transition: .4s;
    }
  }
}

@media screen and (max-width: 425px) {
  ul{
    list-style: none;
    margin: 0;
    padding: 0;
    li{
      margin: 0 0.1em;
      font-size: 18px;
      font-weight: 400;
      display: inline-block;
    }
    li > div{
      display: inline-block;
      transition: .4s;
    }
  }
}

</style>
